<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>首页</title>
    <link rel="stylesheet" type="text/css" href="../../css/api.css"/>
    <link rel="stylesheet" type="text/css" href="../../css/yzl.css"/>
    <link rel="stylesheet" type="text/css" href="../../css/swiper.css"/>

    <!-- Demo styles -->
    <style>
    </style>

</head>
<body>
<div id="app" class="container" v-cloak style="padding-top:170px;">
  <!-- <div>
    <img :src="shopinfo.pic" width="100%">
  </div> -->
  <div class="shop_container" v-if="shopinfo" style="padding-top:20px;width:95%;margin:0 auto;">
    <div class="shop_info" style="background:#ffffff;padding:12px;border-radius:15px;">
    <div class="shop-avatar" tapmode v-open-win vurl="shopuser">
      <img :src="shopinfo.portrait || '../../image/portrait_moren.png'">
    </div>
    <div class="shop-content" tapmode v-open-win vurl="shopuser">
      <div class="shop-title" v-cloak style="height:100%">{{shopinfo.shopname?shopinfo.shopname:'友人店'}}</div>
    </div>
    <div class="getinfo" v-show="member_type!=6" v-myclick="buyshop"  v-row-active.tapmode>我要开店</div>
    <div class="getinfo" v-show="member_type==6" v-myclick="myshop"  v-row-active.tapmode>管理店铺</div>
  </div>
  </div>
  <div class="shop_goods_container" v-if="goods" style="padding-top:10px">
  <div class="shop_goods_info" v-for="(good, index) in goods" v-myclick="[{goods_id:good.goods_id,category_id:0}, openGoodsInfo]">
    <img v-image-resize="{src:good.pic}" :key="good.goods_id" width="100%" style="height:160px">
    <div class="goods_name">
      {{good.title}}
    </div>
    <div class="goods_info_detail">
      <span>￥{{good.price}}</span>
      <span style="color:#E5001E;">领券减{{(good.prime-good.price).toFixed(2)}}</span>
    </div>
    <div class="goods_info_detail" style="padding-top:20px">
      <span style="font-size:12px">赚&nbsp;{{member_type==6?good.t6_gain_max:good.t5_gain_max}}</span>
      <span>{{good.sale_count}}人付款</span>
    </div>
  </div>
  <div style="clear:both"></div>
</div>
<div>
<div class="home-activityCate" v-for="(content, index) in shopcategories" style="background:white;width:100%;margin-top:10px" v-if="content.goods.length > 3">
    <div class="home-activityCate-seckill-floor container" v-bind:class="{'top-active':index==0}" style="width:95%;margin:0 auto">
        <div class="home-activityCate-title-wrap" >
            <img :src="content.pic"  v-myclick="[content.shop_category_id, getcategory]" style="border-radius:10px">
        </div>
        <div :class='"swiper-container-category"+index' style="padding-top:12px; background-color: white;">
            <div class="swiper-wrapper" style="transition-duration: 0ms; transform: translate3d(0px, 0px, 0px);" >
                <div class="swiper-slide" v-for="goodslist in content.goods">
                    <li class="home-activityCate-seckill-new-item" v-myclick="[{goods_id:goodslist.goods_id,category_id:content.shop_category_id}, openCategoryGoodsInfo]">
                        <div class="home-activityCate-seckill-item-img">
                            <img class="home-activityCate-seckill-photo" v-image-resize="{src:goodslist.new_pic?goodslist.new_pic:goodslist.pic}" style="border-radius:10px">
                        </div>
                        <div class="home-activityCate-seckill-item-text">
                            <span class="home-activityCate-seckill-good-title">{{goodslist.title}}</span>
                            <!-- <span class="home-activityCate-seckill-new-price">券后价  <em>¥</em>{{goodslist.price}}</span> -->
                            <span class="home-activityCate-seckill-new-price" style="text-align:center"><span>¥{{goodslist.price}}</span><del class="home-activityCate-seckill-original-price" style="color:#333"><em>¥</em>{{goodslist.prime}}<hr></del></span>
                            <!-- <del class="home-activityCate-seckill-original-price"><em>¥</em>{{goodslist.prime}}<hr></del> -->
                        </div>
                    </li>
                </div>
                <div class="swiper-slide"  >
                    <div class=" home-activityCate-seckill-new-item" v-myclick="[content.shop_category_id, getcategory]">
                        <div class="home-activityCate-seckill-item-img">
                            <img class="home-activityCate-seckill-photo" v-image-resize="{src:'../../image/more_good.png'}" >
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="home-module-gap" v-if="activities.length>0">
    <div  class="home-module-gap-bg">
        <div class="home-module-gap-title" >品牌推荐</div>
        <div class="home-module-gap-line"><img class="home-tuijian-img" v-src="'../../image/title_line.png'"></div>
    </div>
</div>
<div class="home-activityCate" v-for="(content, index) in activities" v-if="activities.length > 0" style="background:white;width:100%;margin-top:10px">
    <div class="home-activityCate-seckill-floor container" v-bind:class="{'top-active':index==0}" style="width:95%;margin:0 auto;border:none">
        <div class="home-activityCate-title-wrap" >
            <img :src="content.pic"  v-myclick="[content.category_id, getactivitycategory]" style="border-radius:10px">
        </div>
        <div :class='"swiper-container"+index' style="padding-top:12px; background-color: white;">
            <div class="swiper-wrapper" style="transition-duration: 0ms; transform: translate3d(0px, 0px, 0px);">
                <div class="swiper-slide" v-for="goodslist in content.goods">
                    <li class="home-activityCate-seckill-new-item" v-myclick="[{goods_id:goodslist.goods_id,category_id:content.category_id}, openGoodsInfo]">
                        <div class="home-activityCate-seckill-item-img">
                            <img class="home-activityCate-seckill-photo" v-image-resize="{src:goodslist.new_pic?goodslist.new_pic:goodslist.pic}" style="border-radius:10px">
                        </div>
                        <div class="home-activityCate-seckill-item-text">
                            <span class="home-activityCate-seckill-good-title">{{goodslist.title}}</span>
                            <!-- <span class="goods_profit" style="color:#9D0152">赚~省：2.3元</span> -->
                            <!-- <span class="home-activityCate-seckill-new-price">券后价  <em>¥</em>{{goodslist.price}}</span> -->
                            <span class="home-activityCate-seckill-new-price" style="text-align:center"><span>¥{{goodslist.price}}</span><del class="home-activityCate-seckill-original-price" style="color:#333"><em>¥</em>{{goodslist.prime}}<hr></del></span>
                            <!-- <del class="home-activityCate-seckill-original-price"><em>¥</em>{{goodslist.prime}}<hr></del> -->
                        </div>
                    </li>
                </div>
                <div class="swiper-slide"  >
                    <div class=" home-activityCate-seckill-new-item" v-myclick="[content.category_id, getactivitycategory]">
                        <div class="home-activityCate-seckill-item-img">
                            <img class="home-activityCate-seckill-photo" v-image-resize="{src:'../../image/more_good.png'}" >
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</div>
</div>
</body>
<script src="../../script/vue.js"></script>
<script src="../../script/api.js"></script>
<script src="../../script/app.js"></script>
<script src="../../script/common.js"></script>
<script src="../../script/url.js"></script>
<script src="../../script/components.js"></script>
<script src="../../script/swiper.js"></script>

<script>

    var MNActionButton,
        goods,
        swiper,
        state,
        activities,
        banners,
        shopcategories,
        categorylength=0,
        activitylength=0,
        mySwiper = new Array(),
        mySwipercategory = new Array(),
        member_type,
        vm;
    var wx;
    apiready = function () {
        showProgress();
        UIScrollPicture = api.require('UIScrollPicture');
        MNActionButton = api.require('PIActionButton');
        wx = api.require('wx');
        setBSImg();
        var data = {
            member_id: getPrefs('member_id')
        };
        var callback = function (ret) {
            var home = ret.content;
            shopinfo = home.shopinfo;
            console.log(JSON.stringify(shopinfo))
            goods = home.shopgoodsinfo;
            shopcategories = home.shopcategory;
            activities = home.homeactivities;
            banners = home.banners;
            if (getPrefs('token')) {
              user = JSON.parse(getPrefs('user'));
              member_type = user.member_type;
            }
            fnOpen();
            initApp();
            api.parseTapmode();
            swiper();
        };
        pinet.post(URL.getShopGoodsInfo, data, callback);
        setRefreshHeaderInfo(refresh);
        window.addEventListener('scroll', function(e) {
          if(api.systemType == 'ios'){
            for(var i = 0; i < activitylength; i++){
              mySwiper[i].update();
            }
            for(var i = 0; i < categorylength; i++){
              mySwipercategory[i].update();
            }
          }
        });
        addListeners();
    };
    function refresh() {
        var data = {
            member_id: getPrefs('member_id')
        };
        var callback = function (ret) {
            this.activitylength = 0;
            this.categorylength = 0;
            var home = ret.content;
            shopinfo = home.shopinfo;
            goods = home.shopgoodsinfo;
            activities = home.homeactivities;
            shopcategories = home.shopcategory;
            banners = home.banners;
            if (getPrefs('token')) {
              user = JSON.parse(getPrefs('user'));
              member_type = user.member_type;
            }
            if (vm) {
                vm.goods = home.shopgoodsinfo;
                vm.shopinfo = home.shopinfo;
                vm.activities = home.homeactivities;
                vm.shopcategories = home.shopcategory;
            } else {
                initApp();
            }
            fnOpen();
            api.refreshHeaderLoadDone();
        };
        var errback = function () {
            api.refreshHeaderLoadDone();
        };

        pinet.post(URL.getShopGoodsInfo, data, callback, errback);
    }

    function initApp() {
        vm = new Vue({
            el: "#app",
            data: {
                goods: goods,
                listOf2col: true,
                url: URL.getHomeData,
                activities:activities,
                shopcategories:shopcategories,
                BSImg: Vue.BSImg,
                member_type:member_type,
                key:0
            },
            updated: function() {
              swiper();
            },
            methods: {
                openGoodsInfo: function (infos) {
                  var attributes = {
                      category_id: infos.category_id,
                      goods_id:infos.goods_id
                  };
                  onEvent('t001_c002','活动-分类-商品',attributes);
                  openWin('widget://html/home/goods_info', {goods_id: infos.goods_id,category_id:infos.category_id,buyeventId:'t001_c002_a001',shareventId:'t001_c002_a002',eventLable:'活动-分类-商品',buyshareeventId:'t001_c002_a003'});
                },
                openCategoryGoodsInfo: function (infos) {
                    console.log(JSON.stringify(infos))
                  var attributes = {
                      category_id: infos.category_id,
                      goods_id:infos.goods_id
                  };
                  onEvent('t003_c005','店铺-分类-商品',attributes);
                  openWin('widget://html/home/goods_info', {goods_id: infos.goods_id,category_id:infos.category_id,buyeventId:'t003_c005_a001',shareventId:'t003_c005_a002',eventLable:'店铺-分类-商品',buyshareeventId:'t003_c005_a003'});
                },
                getcategory: function (actid) {
                    var attributes = {
                        category_id: actid
                    };
                    onEvent('t003_c004','店铺-专题',attributes);
                    openWin('../shop/categorydetail', {category_id: actid});
                },
                getactivitycategory: function (actid) {
                    var attributes = {
                        category_id: actid
                    };
                    onEvent('t001_c001','活动-专题',attributes);
                    openWin('../home/activity', {actid: actid});
                },
                buyshop:function(){
                  if (!getPrefs('token')) {
                      reLogin();
                      return;
                  }
                  var attributes = {
                      type: 6
                  };
                  openWin('../user/addshop', {type: 6});
                },
                myshop:function(){
                  if (!getPrefs('token')) {
                      reLogin();
                      return;
                  }
                  api.sendEvent({
                      name: 'setshop'
                  });
                }
            },
        })
    }
    function swiper(){
      if(shopcategories.length > categorylength){
        for(var i = categorylength; i < shopcategories.length; i++)
         mySwipercategory[i] = new Swiper(('.swiper-container-category')+i, {
            pagination: '.swiper-pagination',
            slidesPerView: 3,
            paginationClickable: true,
            spaceBetween: 5,
            slidesOffsetBefore : 5,
            freeMode: true
        });
        categorylength = shopcategories.length;
      }
      if(activities.length > activitylength){
        for(var i = activitylength; i < activities.length; i++)
         mySwiper[i] = new Swiper(('.swiper-container')+i, {
            pagination: '.swiper-pagination',
            slidesPerView: 3,
            paginationClickable: true,
            spaceBetween: 5,
            slidesOffsetBefore : 5,
            freeMode: true
        });
        activitylength = activities.length;
      }
    }
    function fnOpen() {
        var paths = [];
        for (var i = 0, l = banners.length; i < l; i++) {
            paths.push(banners[i].image);
        }
        UIScrollPicture.open({
            rect: {
                x: 0,
                y: 0,
                w: api.frameWidth,
                h: 170
            },
            data: {
                paths: paths,
            },
            contentMode: 'scaleToFill',
            interval: 3,
            <!--图片是否循环播放-->
            loop: true,
            fixedOn: 'shopinfo',
            <!--模块是否随所属window或frame滚动 true(不随之滚动)-->
            fixed: false
        }, function (ret) {
            if (ret.eventType == 'click') {
                var banner = banners[ret.index];
                actionJump(banner.action);
            }
        });
    }
    function addListeners() {
        api.addEventListener({
            name: 'home'
        }, function () {
            refresh();
        });

        api.addEventListener({
            name: 'viewappear'
        }, function () {
            onPageStart();
        });

        api.addEventListener({
            name: 'viewdisappear'
        }, function (ret, err) {
            onPageEnd();
        });

        api.addEventListener({
            name: 'keyback'
        }, function (ret, err) {
            onPageEnd();
            api.closeWin();
        });
    }
</script>
</html>
